<template>
    <div class="zc-layout-company-body">
        <div class="zc-company-desk-card">
            <div class="zc-company-desk-card-title">常用应用</div>
            <el-row>
                <el-col
                        :xs="24"
                        :sm="8"
                        :md="6"
                        :lg="4"
                        :xl="2"
                        v-for="app in desk.apps"
                        :key="app.id"
                        class="zc-company-desk-card-app">
                    <div class="zc-company-desk-card-app-logo">
                        <el-icon>
                            <Plus/>
                        </el-icon>
                    </div>
                    <div class="zc-company-desk-card-app-title">添加常用</div>
                </el-col>
            </el-row>
        </div>
        <div class="zc-company-desk-card-all-app zc-company-desk-card">
            <div class="zc-company-desk-card-title">全部应用</div>
            <el-row>
                <el-col
                        :xs="24"
                        :sm="8"
                        :md="6"
                        :lg="4"
                        :xl="2"
                        v-for="app in desk.apps"
                        :key="app.id">
                    <div class="zc-company-desk-card-app-logo">
                        <el-icon>
                            <Plus/>
                        </el-icon>
                    </div>
                    <div class="zc-company-desk-card-app-title">添加应用</div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup type="ts">
import {onMounted, reactive} from "vue";
import {Plus} from '@element-plus/icons-vue'

const desk = reactive({
    apps: []
})

onMounted(() => {
    desk.apps = [{}]
})

</script>
